@extends('admin.common.main')
@section('css')
<link rel="stylesheet" type="text/css" href="/webuploader/webuploader.css" />
<style>
</style>
@endsection
@section('cnt')
<div class="x-body">
    @include('admin.common.validate')
    @include('admin.common.msg')
    <form class="layui-form" action="{{ route('admin.fangowners.store') }}" method="post" id="form-member-add">
        {{ csrf_field() }}
        <div class="layui-form-item">
            <label for="name" class="layui-form-label">
                <span class="x-red">*</span>姓名
            </label>
            <div class="layui-input-inline">
                <input type="text" id="name" name="name"
                       autocomplete="off" class="layui-input" value="{{ old('name') }}">
            </div>
        </div>
        <div class="layui-form-item">
            <label for="age" class="layui-form-label">
                <span class="x-red"></span>年龄
            </label>
            <div class="layui-input-inline">
                <input type="text" id="age" name="age"
                       autocomplete="off" class="layui-input" value="{{ old('age') }}">
            </div>
        </div>
        <div class="layui-form-item">
            <label for="phone" class="layui-form-label">
                <span class="x-red">*</span>电话
            </label>
            <div class="layui-input-inline">
                <input type="text" id="phone" name="phone"
                       autocomplete="off" class="layui-input" value="{{ old('phone') }}">
            </div>
        </div>

        <div class="layui-form-item">
            <label for="card" class="layui-form-label">
                <span class="x-red">*</span>身份证号码
            </label>
            <div class="layui-input-inline">
                <input type="text" id="card" name="card"
                       autocomplete="off" class="layui-input" value="{{ old('card') }}">
            </div>
        </div>

        <div class="layui-form-item">
            <label for="phone" class="layui-form-label">
                <span class="x-red"></span>家庭住址
            </label>
            <div class="layui-input-inline">
                <input type="text" id="address" name="address"
                       autocomplete="off" class="layui-input" value="{{ old('address') }}">
            </div>
        </div>
         <div class="layui-form-item">
            <label for="phone" class="layui-form-label">
                <span class="x-red"></span>邮箱
            </label>
            <div class="layui-input-inline">
                <input type="text" id="email" name="email"
                       autocomplete="off" class="layui-input" value="{{ old('email') }}">
            </div>
        </div>
        <div class="layui-form-item">
            <label for="sex" class="layui-form-label">
                <span class="x-red"></span>性别
            </label>
            <div class="layui-input-inline">
                <input type="radio" name="sex" lay-skin="primary" title="男" value="男" checked="">
                <input type="radio" name="sex" lay-skin="primary" title="女" value="女">
            </div>
        </div>
        <div class="layui-form-item">
              <label for="icon" class="layui-form-label">
                  <span class="x-red">*</span>身份证照片
              </label>
              <div class="layui-input-inline">
                  {{-- 表单提交的时候的路径的地址 --}}
                  {{-- 上传表单的核心是  这里使用隐藏域来保存上传的路径 后传递给后台 --}}
                  <input type="hidden" name="pic" id="pic" value="">
                  <div id="picker">上传身份证</div>
                  <ul id="imglist" style="width:500px;">
                    
                  </ul>
              </div>
          </div>

        <div class="layui-form-item" style="margin-top: 120px;">
            <label for="L_repass" class="layui-form-label">
            </label>
            <button  class="layui-btn" type="submit">
                添加房东
            </button>
        </div>
    </form>
</div>
@endsection
@section('js')
<script src="/webuploader/webuploader.js"></script>
<script type="text/javascript" src="/admin/lib/jquery.validation/1.14.0/jquery.validate.js"></script>
<script type="text/javascript" src="/admin/lib/jquery.validation/1.14.0/validate-methods.js"></script>
<script type="text/javascript" src="/admin/lib/jquery.validation/1.14.0/messages_zh.js"></script>
<script>
    $("#form-member-add").validate({
        //规则
        rules:{
            //表单元素名称
            name:{
                required:true
            },
            phone:{
                required: true
            },
            card:{
                required:true
            },
        },
        messages:{
            name:"请输入姓名",
            phone:"请输入电话",
            card:"请输入身份证号码",
        },
        onkeyup:false,
        success:"valid",
        submitHandler:function (form) {
            console.log(form)
            form.submit();
        }
    });



    //自定义验证规则
    jQuery.validator.addMethod("phone", function (value, element) {
        var reg1 = /^\+86-1[3-9]\d{9}$/;
        var reg2 = /^1[3-9]\d{9}$/;
        var ret = reg1.test(value) || reg2.test(value);
        return this.optional(element) || ret;
    }, "请输入正确的手机号码");


     //初始化webuploader
    //
    var uploader = WebUploader.create({
        //选完之后，是否自动上传
        auto:true,
        //swf文件路径
        swf:'/webuploader/Uploader.swf',
        //文件接收服务端,上传的php代码
        server:'{{ route('admin.fangowners.upfile') }}',
        //选择文件的按钮
        pick:{
            id:"#picker",
            //是否开启选择多个文件的能力
            multiple:true
        },
        //文件上传携带的参数
        formData:{
            _token:'{{ csrf_token() }}'
        },
        //文件上传的表单名称【默认是file】
        fileVal:'file',
        //压缩image,默认如果是jpeg，文件上传前会进行压缩再上传
        resize:true
    });

    //文件上传之后的回调 【这是插件内置方法】
    uploader.on('uploadSuccess',function(file,ret){
        console.log(ret.url)
        let val = $("#pic").val();
        let temp = val + '#' + ret.url;
        $("#pic").val(temp);
        //将数据显示在页面上
        let html = `
            <li style="float: left;margin-left:100px;">
                <img src="${ret.url}" style="width: 100px;height:100px;border:1px solid #ccc;position: absolute;">
                <span class="X" onclick="delpic(this,'${ret.url}')" style="position: relative;left:90px; font-size:16px;color:#FFFFFF;background:#000000;cursor:pointer">X</span>
            </li>
        `;
        $("#imglist").append(html);
    });

    $(document).on('mouseover','.X',function(){
        $(this).css('color','red');
    })

     $(document).on('mouseout','.X',function(){
        $(this).css('color','#FFFFFF');
    })


    //删除图片
    function delpic(obj,picurl){
        console.log(obj)
        //删除图片这边要做三件事   {1：页面上图片的删除  2：隐藏域中图片地址的删除  3：向后台发起ajax请求，进行真实图片的删除}
        //定义删除图片的地址
        let url = "{{ route('admin.fangowners.delpic') }}?file="+picurl;
        $.ajax({
            type: "get",
            url: url,
            dataType: "json",
            success: function (response) {
                if(response.status == 0){
                    $(obj).parent().remove();
                    $("#pic").val($("#pic").val().replace(`#${picurl}`,''));
                }
            }
        });
        
    }


</script>
@endsection